<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>七颗牙学堂</title>

    <link href="css/common.css" rel="stylesheet" type="text/css">
    <link href="css/layer.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="js/common.js"></script>
    <script src="js/comment.js"></script>
</head>
<style>
    body {
        width: 7.5rem;
        background-color: #f5f5f5;
    }
    
    #app {
        opacity: 0;
    }
    
    .title {
        color: #333;
        padding-top: 1rem;
        text-align: center;
        font-weight: bold;
        font-size: .46rem;
    }
    
    .inputall {
        width: 5.2rem;
        margin: 1rem auto;
        border: 0.02rem solid #ddd;
        border-radius: 0.04rem;
        background-color: #fff;
    }
    
    .inputall input {
        height: .6rem;
        line-height: .6rem;
        width: 5rem;
        padding: 0 .1rem;
        color: #333;
        font-size: .3rem;
        outline: none;
        border: none;
    }
    
    .inputbut {
        background-color: #409EFF;
        width: 3rem;
        height: .88rem;
        line-height: .88rem;
        margin: 1rem auto 0;
        color: #fff;
        font-size: .3rem;
        text-align: center;
        border-radius: 0.04rem;
    }
    
    .divinput {
        width: 5rem;
        border-radius: 0.04rem;
        background-color: #fff;
        height: 3rem;
        margin: 1rem auto 0;
        border: 0.01rem solid #ddd;
        display: none;
    }
    
    .divph {
        color: #888686;
        text-align: center;
        padding-top: .2rem;
    }
    
    .divph1 {
        padding-left: .3rem;
        margin-top: .2rem;
        text-align: left;
    }
    
    .showerViplo {
        width: 100%;
        height: 100%;
        position: fixed;
        background: rgba(0, 0, 0, .2);
        z-index: 9999;
        top: 0;
    }
    
    .loadmoreshowerVip {
        width: 3rem;
        height: 3rem;
        background: rgba(0, 0, 0, 0);
        margin: 4rem auto 0;
        /* display: none; */
    }
    
    .loadmoreshowerVip img {
        width: 80%;
        height: 80%;
        margin: auto;
        display: block;
    }
    
    .quenamestem {
        width: 6.9rem;
        margin-bottom: 0.24rem;
        padding: .3rem;
        background-color: #fef5f5;
    }
</style>

<body>
    <div id='app'>
        <div>
            <p class="title">七颗牙模考大赛排名查询</p>
            <div class="inputall">
                <input type="text" placeholder="请输入手机号" v-model='phone' @input='inpuphone'>
            </div>
            <div class="inputbut" v-if='showload'>查询</div>
            <div class="inputbut" v-else @click='cxclick'>查询</div>

            <div class="divinput">
                <p class="divph">{{phone}}</p>
                <p class="divph divph1">分数：{{datdscore.score}}</p>
                <p class="divph divph1">排名：{{datdscore.sort}}</p>
            </div>
        </div>


        <div class="showerViplo" v-if="showload">
            <div class="loadmoreshowerVip">
                <img src="img/load.gif" alt="">
            </div>
        </div>

    </div>

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript" src="js/vue-router.js"></script>
    <script type="text/javascript" src="./js/layer.js"></script>
    <script type="text/javascript">
        var app2 = new Vue({
            el: '#app ',
            data: {
                // url: 'https://n.qikeya.com/saas/public/index.php/',
                url: 'https://appapi.qikeya.cn/',
                showload: false,
                phone: '',
                datdscore: {},
            },
            methods: {
                inpuphone() {
                    var that = this;
                    $('.divinput').hide();
                },
                cxclick() {
                    var that = this;
                    if ((/^1\d{10}$/.test(that.phone))) {
                        that.showload = true;
                        var data = {
                            tel: that.phone,
                        }
                        utilJs.postMethod(that.url + "api/Activities/findSort", data, (res) => {
                            if (Number(res.errcode) == 0) {
                                var data = res.data;
                                // console.log(data);
                                that.datdscore = data;
                                $('.divinput').show();
                            } else {
                                layer.open({
                                    content: res.msg,
                                    skin: 'msg',
                                    time: 1 //1秒后自动关闭
                                });
                                $('.divinput').hide();
                            }
                            that.showload = false;
                        })
                    } else {
                        layer.open({
                            content: '请输入正确的手机号',
                            skin: 'msg',
                            time: 1 //1秒后自动关闭
                        });
                        $('.divinput').hide();
                    }

                },

            },
            mounted() {
                $('#app').css('opacity', 1);
            }
        })
    </script>
</body>

</html>